<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			#canvas {
				display: block;
				border: 1px solid red;
				margin: 0 auto;
			}
			#chech {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: -10;
			}
			p {
				font-size:18px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		
		<p>写的比较乱，还没来得及优化，求大神赐教</p>
		
		<canvas id="canvas" width="800" height="400"></canvas>
		<canvas id="chech" width="800" height="400"></canvas>
		
	</body>
	
	<script type="text/javascript">
		
		
		var canvas = document.getElementById("canvas");
		var cxt = canvas.getContext("2d");
		var temp = document.getElementById("chech").getContext("2d");
		
		var imageData;		// 获取的图像
		var imgData;		// 获取的图像 的像素信息
		var imgDateFilterArr = [];		// 过滤后的像素
		
		var imagei = new Image();
		
		var zi = ["3","2","1","中秋节","快乐","祝","极乐网","越办","越好","!"];
		
		var num = 0;
		cxt.fillStyle = "#01cfff";
		temp.fillStyle = "#01cfff";
		temp.font = "200px arial";
		temp.textBaseline = "middle";
		temp.textAlign = "center";
		temp.fillText(zi[num], 400, 200);
		
		
		imageData = temp.getImageData(0,0,800,400);
		imgData = imageData.data
		filterPx();
		ani();
		
		
		/**
		 * 
		 * @param {int} col：
		 * @param {int} row
		 */
		function getColor(col , row){
			var px = {};
			
			var r = imgData[col * 4 * 800 + row * 4 ];
			var g = imgData[col * 4 * 800 + row * 4 + 1];
			var b = imgData[col * 4 * 800 + row * 4 + 2];
			
			if (r!=0 || g!=0 || b!=0) {
				px.ex = parseInt(row) + randommm(-5,5);
				px.ey = parseInt(col) + randommm(-5,5);
				px.tx = 0;
				px.ty = 0;
				px.sx = randommm(0,800);
				px.sy = randommm(0,800);
				px.t = 0;
				px.d = 60;
				imgDateFilterArr.push(px);
			}
		}
		
		
		// 过滤数据
		function filterPx(){
			imgDateFilterArr.length = 0;
			var w = imageData.width;
			var h = imageData.height;
			for (var i = 0 ; i < 800 ; i++) {
				for (var j = 0 ; j < 400 ;j++) {
					getColor(j,i);
					getColor(j++,i);
				}
			}
		}
		
		// 获取数据中的数据
		function drawPX(arr){
			cxt.clearRect(0,0,800,400);
			for (var i = 0 , len = arr.length; i < len ; i++){
//				cxt.fillStyle = arr[i].color;
				cxt.fillRect(parseInt(arr[i].tx) , parseInt(arr[i].ty) , 1 , 1);
			}
		}
		
		
		function randommm(min , max){
			return Math.floor(Math.random() * (max - min)) + min ;
		}
		
		
		/**
		 * 缓动函数，每帧改变数据中元素的位置
		 */
		
		
		function ease(t, b, c, d) {
			if((t /= d / 2) < 1) return c / 2 * t * t + b;
			return -c / 2 * ((--t) * (t - 2) - 1) + b;
		}
		
		var seti;
		var f = true;
		function ani(){
			cxt.fillStyle = "rgb("+randommm(20,200)+","+randommm(200,200)+","+randommm(20,200)+")";
			seti = setInterval(function(){
				var lenm = Math.floor(imgDateFilterArr.length / 8);
				
				for (var i = 0 , len = lenm * 8 ; i < len ; ) {
					calepx(imgDateFilterArr[i++]);
					calepx(imgDateFilterArr[i++]);
					calepx(imgDateFilterArr[i++]);
					calepx(imgDateFilterArr[i++]);
					calepx(imgDateFilterArr[i++]);
					calepx(imgDateFilterArr[i++]);
					calepx(imgDateFilterArr[i++]);
					calepx(imgDateFilterArr[i++]);
				}
				if (imgDateFilterArr[0].tx == imgDateFilterArr[0].ex) {
					clearInterval(seti);
					setTimeout(function(){
						if (f) {
							scattered();
							ani();
							f = false;
						} else {
							// 生成新的数据
							num++;
							if (num > 9) {
								num = 0;
							}
							temp.clearRect(0,0,800,400);
							temp.fillText(zi[num], 400, 200);
							imageData = temp.getImageData(0,0,800,400);
							imgData = imageData.data
							filterPx();
							ani();
							f = true;
						}
					},400);
				}
				drawPX(imgDateFilterArr);
			},15);
		}
		
		
		// 缓动
		function calepx(pxo){
			var t = pxo.t;
			var d = pxo.d;
			var sx = pxo.sx;
			var sy = pxo.sy;
			var ex = pxo.ex;
			var ey = pxo.ey;
			
			if (t < d) {
				t++;
				pxo.t = t;
				pxo.tx = ease(t, sx, (ex - sx), d);
				pxo.ty = ease(t, sy, (ey - sy), d);
			}
			
			return pxo;
		}
		
		// 聚合后在分散粒子
		function scattered(){
			for (var i = 0 ; i < imgDateFilterArr.length ; i++) {
				var temp = imgDateFilterArr[i];
				temp.t = 0;
				temp.sx = temp.ex;
				temp.sy = temp.ey;
				temp.tx = -1;
				temp.ty = -1;
				temp.ex = randommm(0,800);
				temp.ey = randommm(0,400);
				imgDateFilterArr[i] = temp;
			}
		}
		
	</script>
	
</html>